<template>
	<view>
		<z-paging ref="paging" @onRefresh="onRefresh" @query="query" v-model="list"
			empty-view-img="http://cdn.uviewui.com/uview/empty/data.png" :empty-view-style="{'margin-bottom':'100rpx'}">
			<template #top>
				<view class="tab">
					<view :class="params.status === 0 ? 'tab-item tab-item-ac' : 'tab-item' " @click="setCurrent(0)" >
						<view>
							已通过
						</view>
					</view>
					<view :class="params.status === 1 ? 'tab-item tab-item-ac' : 'tab-item' " @click="setCurrent(1)">
						<view>
							待审核
						</view>
					</view>
					<view :class="params.status === 2 ? 'tab-item tab-item-ac' : 'tab-item' " @click="setCurrent(2)">
						<view>
							已驳回
						</view>
					</view>
				</view>
			</template>
		
		<view class="list">
			<view class="list-item" v-for="it in list">
				<view class="list-item-header flex-sp">
					<view class="list-item-header-l flex-center">
						<image :src="it.user.avatar" mode=""></image>
						{{it.user.nickname}}
					</view>
					<view class="list-item-header-status" v-if="params.status === 0">已通过</view>
					<view class="list-item-header-status" v-if="params.status === 1" style="color: #E62B0A;">待审核</view>
					<view class="list-item-header-status" v-if="params.status === 2" style="color: #E62B0A;">已驳回</view>
				</view>
				<view class="list-item-title">{{it.content || ''}}</view>
				<view class="list-item-title-tx">提交时间：{{it.created_at || ''}}</view>
				<view class="list-item-title-tx">说明：{{it.reason || ''}}</view>
			</view>
		</view>
		</z-paging>
	</view>
</template>

<script>
	import {examineIndexHttp} from '@/common/http/api.js'
	export default {
		data(){
			return {
				list: [],
				params:{
					status: 0
				}
			}
		},
		methods: {
			setCurrent(it) {
				this.params.status = it
				this.$refs.paging.reload()
			},
			query(pageNo, pageSize) {
				console.log('触底', pageNo, pageSize)
				//this.onReachBottomReset()
				let token = uni.getStorageSync('token')
				if (!token) return
				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				console.log('下拉刷新')
				//this.reload(true)
			},
			init(pageNo, pageSize) {
				let params = {
					...this.params,
					page: pageNo
				}
				this.loading = true
				console.log('params', params, this.params)
							
				examineIndexHttp(params).then(res => {
					//this.$refs.paging.complete([]);
					this.$refs.paging.complete(res.data.data);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}
	.tab {
		width: 100%;
		display: flex;
		margin: 30rpx 0 50rpx;
		.tab-item {
			
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			view {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999; 
				width: fit-content;
			}
		}
		.tab-item-ac {
			view {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				position: relative;
			}
			view::after {
				content: "";
				width: 80%;
				position: absolute;
				left: 10%;
				bottom: -20rpx;
				height: 6rpx;
				background: #222222;
			}
		}
	}
	.list {
		width: 716rpx;
		margin: 0 auto;
		.list-item {
			width: 716rpx;
			margin-bottom: 22rpx;
			background: #EFE9DD;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 34rpx 0;
			.list-item-header {
				margin-bottom: 30rpx;
				box-sizing: border-box;
				padding:0 29rpx;
				.list-item-header-l {
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
						border-radius: 50%;
					}
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #686868;
				}
				.list-item-header-status {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #1AAF7D;
				}
			}
			.list-item-title {
				box-sizing: border-box;
				padding:0 71rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 26rpx;
			}
			.list-item-title-tx {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #686868;
				margin-bottom: 22rpx;
				box-sizing: border-box;
				padding:0 71rpx;
			}
		}
	}
</style>